<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/my.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-color:#000;
            background-image: radial-gradient(circle at top right, rgba(15, 7, 14, 0.83), #0f070e),
            radial-gradient(circle at 20% 80%, rgba(15, 7, 14, 0.67), #0f070e);
        }
        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas width="700" height="634"></canvas>


    <!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
     <!--   手机端(页面缩小)stackable可堆叠 active为当前选中  mobile reversed -->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">HuiBlog</h2>
            <a href="#" class="m-item active item m-mobile-hide"><i class="home icon"></i> 首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon "></i> 标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon "></i> 归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon transparent  input">
                    <input type="text" class="m-text-write" placeholder="搜索...">
                    <i class="search icon inverted"></i>

                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top">
        <i class="sidebar icon m-mobile-show"></i>
    </a>
</nav>

    <!--中间内容-->
    <div class="ui m-container m-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客列表-->
                <div class="eleven wide column">
                    <!--header-->
                    <!--attached 把两个segment连成一个-->
                    <div class="ui top attached  segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>
                            <div class="right aligned column">
                                共 <h2 class="ui orange header m-inline-block m-text-thin">14</h2> 篇
                            </div>
                        </div>
                    </div>
                    <!--content-->
                    <div class="ui attached segment">
                        <div class="ui padded vertical m-padded-tb-large segment">
                            <!--stackable手机页面图片方大，mobile reversed 手机端反转图片放大放在开头-->
                            <div class="ui stackable mobile reversed grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header aligned center">你真的理解什么是财富自由吗？</h3>
                                    <br>
                                    <p class="m-text">我安慰我啊啊我打大啊单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完 阿伟安慰的啊</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <!--小按钮 avatar圆形小框  horizontal表示内组件水平放置 -->
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                                                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2020-01-01
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon">9999</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column">
                                            <!--label按钮-->
                                            <a href="" target="_blank" class="ui teal basic teal label">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div class="ui padded vertical m-padded-tb-large segment">
                            <div class="ui stackable mobile reversed grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header aligned center">你真的理解什么是财富自由吗？</h3>
                                    <br>
                                    <p class="m-text">我安慰我啊啊我打大啊单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完 阿伟安慰的啊</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <!--小按钮 avatar圆形小框 -->
                                                <div class="item">
                                                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                                                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2020-01-01
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon">9999</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column">
                                            <!--label按钮-->
                                            <a href="" target="_blank" class="ui teal basic teal label">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div class="ui padded vertical m-padded-tb-large segment">
                            <div class="ui stackable mobile reversed grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header aligned center">你真的理解什么是财富自由吗？</h3>
                                    <br>
                                    <p class="m-text">我安慰我啊啊我打大啊单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完 阿伟安慰的啊</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <!--小按钮 avatar圆形小框 -->
                                                <div class="item">
                                                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                                                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2020-01-01
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon">9999</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column">
                                            <!--label按钮-->
                                            <a href="" target="_blank" class="ui teal basic teal label">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div class="ui padded vertical m-padded-tb-large segment">
                            <div class="ui stackable mobile reversed grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header aligned center">你真的理解什么是财富自由吗？</h3>
                                    <br>
                                    <p class="m-text">我安慰我啊啊我打大啊单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完 阿伟安慰的啊</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <!--小按钮 avatar圆形小框 -->
                                                <div class="item">
                                                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                                                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2020-01-01
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon">9999</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column">
                                            <!--label按钮-->
                                            <a href="" target="_blank" class="ui teal basic teal label">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div class="ui padded vertical m-padded-tb-large segment">
                            <div class="ui stackable mobile reversed grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header aligned center">你真的理解什么是财富自由吗？</h3>
                                    <br>
                                    <p class="m-text">我安慰我啊啊我打大啊单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完单位打打的安慰的啊阿伟的挖到我安慰的安慰打挖到阿达阿伟打完阿达阿伟阿伟打完 阿伟安慰的啊</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <!--小按钮 avatar圆形小框 -->
                                                <div class="item">
                                                    <img src="../static/images/wechat.jpg" class="ui avatar image" alt="">
                                                    <div class="content"><a href="#" class="header m-text-mini">槐佳辉</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2020-01-01
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon">9999</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column">
                                            <!--label按钮-->
                                            <a href="" target="_blank" class="ui teal basic teal label">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>

                            </div>
                        </div>


                    </div>
                    <!--footer-->
                    <div class="ui bottom attached segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <a href="#" class="ui mini teal basic button">上一页</a>
                            </div>
                            <div class="right aligned column">
                                <a href="#" class="ui mini teal basic button">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--右边 top-->
                <div class="five wide column">
                    <!--分类-->
                    <div class="ui stackable segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>分类
                                </div>
                                <div class="right aligned column">
                                    <a href="#">more<i class="angle double right icon"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <div class="ui fluid vertical menu">
                                <a href="#" class="item">
                                    学习日记
                                    <div class="ui teal basic right pointing label">13</div>
                                </a>
                                <a href="#" class="item">
                                    学习日记
                                    <div class="ui teal basic right pointing label">13</div>
                                </a>
                                <a href="#" class="item">
                                    学习日记
                                    <div class="ui teal basic right pointing label">13</div>
                                </a>
                                <a href="#" class="item">
                                    学习日记
                                    <div class="ui teal basic right pointing label">13</div>
                                </a>
                                <a href="#" class="item">
                                    学习日记
                                    <div class="ui teal basic right pointing label">13</div>
                                </a>

                            </div>

                        </div>
                    </div>

                    <!--标签-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="tags icon"></i>标签
                                </div>
                                <div class="right aligned column">
                                    <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a>
                                <a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                    我的标签<div class="detail">23</div></a>
                            <a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a><a href="#" target="_blank" class="ui teal basic right pointing label m-margin-tb-tiny">
                                我的标签<div class="detail">23</div>
                            </a>
                        </div>
                    </div>
                    <!--最新推荐-->

                    <div class="ui segments">
                        <div class="ui secondary top attached segment">
                                <div class="column">
                                    <i class="bookmark icon"></i>最新推荐
                                </div>
                        </div>
                        <div class="ui attached segment"><a href="#" target="_blank" class="ui m-black m-text-thin ">用户故事</a> </div>
                    </div>
                    <!--二维码-->
                    <!--horizontal 水平   divider 分割线   header类型-->
                    <h4 class="ui horizontal divider header inverted m-text-spaced">扫码关注我</h4>
                    <div class="ui segment">
                        <div class="ui card centered" style="width: 11em">
                            <img src="../static/images/tom.jpg" alt="" class="ui rounded image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<footer th:replace="_fragments :: footer"></footer>

<!--   &lt;!&ndash;底部footer&ndash;&gt;
<FOOTER class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui divided stackable inverted grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>

                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email: 1748756566@qq.com</a>
                    <a href="#" class="item">QQ: 1748756566</a>
                    <a href="#" class="item">微信： BXY4543</a>

                </div>
            </div>
            <div class="five wide column">
                <h4 class="ui inverted header m-opacity-min">介绍</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">我的个人博客 ： hello，world</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright 2019-2020 MyBlog</p>
    </div>

</FOOTER>-->

<th:block th:replace="_fragments :: script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</th:block>
<script>

    $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');//如有这个Class则去除，没有则加入
    });
</script>
</body>
</html>